<script setup>
import { ref } from 'vue'
import { userPage } from '@/api/system/user'

const loading = ref(false)
const tableData = ref([])
const tableTotal = ref(0)

const pageQuery = ref({ pageNum: 1, pageSize: 10 })

function getUserPage() {
    loading.value = true;
    userPage(pageQuery.value).then(res => {
        console.log('res: ', res)
        tableData.value = res.data.list
        tableTotal.value = res.data.totalRow
    }).finally(() => {
        loading.value = false;
    })
}

getUserPage()

</script>


<template>
    <Header title="系统用户管理" comments="管理系统用户" />
    <Main>
        <el-form inline>
            <el-form-item>
                <el-button>新增用户</el-button>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="请输入用户名"></el-input>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" v-loading="loading">
            <el-table-column label="序号" type="index" width="100" />
            <el-table-column label="用户名" prop="username" />
            <el-table-column label="密码">************</el-table-column>
            <el-table-column label="用户昵称" prop="nickName" />
            <el-table-column label="ip地址" prop="ipaddr" />
            <el-table-column label="最近登录时间" prop="loginTime" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="text">编辑</el-button>
                    <el-button size="text">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="flex justify-end">
            <el-pagination background class="mt-10" layout="prev, pager, next" :total="tableTotal" />
        </div>
    </Main>
</template>